<!--
  胜负彩订单详情
-->
<template>
  <div class="fixed-header fixed-footer">
    <x-header>订单详情
      <a slot="right" @click="screenshot"><i class="iconfont icon-share font-xxxl"></i></a>
    </x-header>
    <div class="bg-white py-3">
      <div class="flex-middle px-2">
        <img class="img-xl" :src="o.icon">
        <strong class="font-xl" v-text="o.lotteryName"></strong>
        <span class="text-grey ml-2">{{o.lotteryNo}}期</span>
        <img class="img-xl ml-auto" src="../../assets/img/order/win.png" v-if="o.status > 9">
        <img class="img-xl ml-auto" src="../../assets/img/order/lose.png" v-else-if="o.status == 8">
        <img class="img-xl ml-auto" src="../../assets/img/order/wait.png" v-else-if="[4, 5, 7].includes(o.status)">
      </div>
      <div class="text-center">
        <h3 v-text="o.statusText"></h3>
        <i class="text-grey" v-if="o.statusTips">（{{o.statusTips}}）</i>
      </div>
    </div>
    <div class="p-3" v-if="o.results">
      <strong class="mr-4">开奖号码</strong>
      <em class="text-red spacing-sm" v-html="stringify(o.results)"></em>
    </div>
    <div class="p-3" v-else>
      <strong class="mr-4">预计开奖</strong>
      <i v-text="o.finishTime"></i>
    </div>
    <div class="bg-white p-3">
      <div class="mb-3">
        <i class="text-grey mr-4">方案内容</i>{{o.bets}}注{{o.times}}倍，方案金额{{o.amount}}元
      </div>

      <bet :bet="b" :results="o.results" :key="i" v-for="(b, i) in o.betContent"/>

      <div class="text-right" v-if="o.status > 3 && o.status != 6">
        <router-link :to="'/tickets?id=' + o.id">出票成功，出票明细 ></router-link>
      </div>
    </div>

    <infomation :o="o"/>

    <footer class="d-flex bg-white p-2" v-if="o.status == 0">
      <a class="btn btn-grey mr-auto" @click="cancel">取消订单</a>
      <a class="btn btn-danger" @click="pay">继续提交</a>
    </footer>
    <footer class="d-flex bg-white p-2" v-else>
      <a class="btn btn-danger mr-auto" @click="recommit">提交本号码</a>
      <a class="btn btn-danger" @click="jump('/daletou')">继续选择本彩种</a>
    </footer>
  </div>
</template>

<script>
import { jump } from '../../router'
import xHeader from '../widgets/header'
import http from '../../http'
import Infomation from '../orders/infomation'

export default {
  components: {Infomation, xHeader, Bet},
  name: 'order',
  beforeRouteEnter (to, from, next) {
    http.post('/user/betDetail', {orderId: to.query.id}).then(o => {
      next(vm => {
        vm.order = o
      })
    })
  },
  data: () => ({
    order: {}
  }),
  methods: {
    screenshot () {
      this.$toast('invoke://screenshot')
      location = 'invoke://screenshot'
    },
    cancel () {
      http.post('/order/delOrder', {orderId: this.o.id}).then(res => {
        this.$toast(res.msg || '取消订单成功')
        jump('/orders')
      })
    },
    pay () {
      var o = this.order
      if (this.app) {
        location = `checkout://orderId=${o.id}&amount=${o.amount}&lotteryType=${o.lotteryType}`
        return
      }
      http.post('/order/payOrder', {orderId: o.id}).then(() => {
        this.$store.dispatch('fetch')
        this.$dialog.alert({
          title: '支付成功',
          message: '该订单已支付成功'
        }).then(() => {
          this.$router.replace('/daletou')
        })
      })
    },
    jump
  }
}
</script>
